﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
    <!--<![endif]-->
    <!-- BEGIN HEAD -->

    <head>
        <meta charset="utf-8" />
        <title>SuperMgr前端框架</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />
        <!--全局通用框架样式 begin-->
        <!-- 全局基本样式 -->
        <link href="../content/superui/min/css/superui.common.min.css" rel="stylesheet" />
        <!-- 全局主题样式 -->
        <link href="../content/superui/global/css/components.min.css" id="style_components" rel="stylesheet" />
        <link href="../content/superui/pages/layouts/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
        <!--全局通用框架样式 end-->
    </head>

    <body>
        <div class="page-container">
            <div class="page-content">
                <!-- END PAGE HEADER-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="tabbable-line">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#tab_1_1" data-toggle="tab">普通按钮</a>
                                </li>
                                <li>
                                    <a href="#tab_1_2" data-toggle="tab">圆角按钮
                                        <span class="label label-sm label-danger circle">new</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab_1_1">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <!-- BEGIN BUTTONS PORTLET-->
                                            <div class="portlet light tasks-widget bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <span class="caption-subject font-green-haze bold uppercase">按钮</span>
                                                        <span class="caption-helper">任务汇总...</span>
                                                    </div>
                                                    <div class="actions">
                                                        <div class="btn-group">
                                                            <a class="btn green-haze btn-outline btn-circle btn-sm" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> 动作
                                                                <i class="fa fa-angle-down"></i>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li>
                                                                    <a href="javascript:;">
                                                                        <i class="i"></i> Option 1</a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;">Option 2</a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;">Option 3</a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;">Option 4</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="portlet-body util-btn-margin-bottom-5">
                                                    <div class="clearfix">
                                                        <h4 class="block">默认bootstrap风格按钮</h4>
                                                        <!-- Standard gray button with gradient -->
                                                        <button type="button" class="btn btn-default">Default</button>
                                                        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                                        <button type="button" class="btn btn-primary">Primary</button>
                                                        <!-- Indicates a successful or positive action -->
                                                        <button type="button" class="btn btn-success">Success</button>
                                                        <!-- Contextual button for informational alert messages -->
                                                        <button type="button" class="btn btn-info">Info</button>
                                                        <!-- Indicates caution should be taken with this action -->
                                                        <button type="button" class="btn btn-warning">Warning</button>
                                                        <!-- Indicates a dangerous or potentially negative action -->
                                                        <button type="button" class="btn btn-danger">Danger</button>
                                                        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                                                        <button type="button" class="btn btn-link">Link</button>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">自定义按钮风格</h4>
                                                        <p>
                                                            <button type="button" class="btn default">Default</button>
                                                            <button type="button" class="btn red">Red</button>
                                                            <button type="button" class="btn blue">Blue</button>
                                                            <button type="button" class="btn green">Green</button>
                                                            <button type="button" class="btn yellow">Yellow</button>
                                                            <button type="button" class="btn purple">Purple</button>
                                                            <button type="button" class="btn dark">Dark</button>
                                                        </p>
                                                      
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">Outline风格按钮</h4>
                                                        <p>
                                                            <button type="button" class="btn default btn-outline">Default</button>
                                                            <button type="button" class="btn red btn-outline">Red</button>
                                                            <button type="button" class="btn blue btn-outline">Blue</button>
                                                            <button type="button" class="btn green btn-outline">Green</button>
                                                            <button type="button" class="btn yellow btn-outline">Yellow</button>
                                                            <button type="button" class="btn purple btn-outline">Purple</button>
                                                            <button type="button" class="btn dark btn-outline">Dark</button>
                                                        </p>
                                                  
                                                    </div>
                                                  
                                                    <div class="clearfix">
                                                        <h4 class="block">带条纹按钮</h4>
                                                        <a href="javascript:;" class="btn default red-stripe"> Red </a>
                                                        <a href="javascript:;" class="btn default blue-stripe"> Blue </a>
                                                        <a href="javascript:;" class="btn default green-stripe"> Green </a>
                                                        <a href="javascript:;" class="btn default yellow-stripe"> Yellow </a>
                                                        <a href="javascript:;" class="btn default purple-stripe"> Purple </a>
                                                        <a href="javascript:;" class="btn default green-stripe"> Green </a>
                                                        <a href="javascript:;" class="btn default dark-stripe"> Dark </a>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">禁用按钮</h4>
                                                        <a href="javascript:;" class="btn default disabled"> Default </a>
                                                        <a href="javascript:;" class="btn red disabled"> Red </a>
                                                        <a href="javascript:;" class="btn blue disabled"> Blue </a>
                                                        <a href="javascript:;" class="btn green disabled"> Green </a>
                                                        <a href="javascript:;" class="btn yellow disabled"> Yellow </a>
                                                        <a href="javascript:;" class="btn purple disabled"> Purple </a>
                                                        <a href="javascript:;" class="btn dark disabled"> Dark </a>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">各种尺寸按钮</h4>
                                                        <button type="button" class="btn default btn-lg">大尺寸按钮</button>
                                                        <button type="button" class="btn red">标准尺寸按钮</button>
                                                        <button type="button" class="btn blue btn-sm">小尺寸按钮</button>
                                                        <button type="button" class="btn green btn-sm">更小尺寸按钮</button>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">带标记按钮</h4>
                                                        <a href="javascript:;" class="btn default"> Link </a>
                                                        <button class="btn default">Button</button>
                                                        <input type="button" class="btn default" value="Input">
                                                        <input type="submit" class="btn default" value="Submit"> </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">Block块风格按钮</h4>
                                                        <a href="javascript:;" class="btn default btn-block"> Link </a>
                                                        <button class="btn blue btn-block">Button</button>
                                                        <input type="button" class="btn red btn-block" value="Input">
                                                        <input type="submit" class="btn purple btn-block" value="Submit">
                                                        <button class="btn blue btn-block btn-outline ">Button</button>
                                                        <input type="button" class="btn red btn-outline btn-block" value="Input">
                                                        <input type="submit" class="btn purple btn-outline  btn-block" value="Submit">
                                                        <button class="btn yellow-mint btn-block btn-outline sbold uppercase">Button</button>
                                                        <input type="button" class="btn red-mint btn-outline btn-block sbold uppercase" value="Input">
                                                        <input type="submit" class="btn green-sharp btn-outline  btn-block sbold uppercase" value="Submit"> </div>
                                                </div>
                                            </div>
                                            <div class="portlet light bordered">
                                                <div class="portlet-title tabbable-line">
                                                    <div class="caption">
                                                        <i class="icon-globe font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">图标式按钮</span>
                                                    </div>
                                                    <ul class="nav nav-tabs">
                                                        <li class="active">
                                                            <a href="#dropdown_fontawesome" data-toggle="tab"> Fontawesome风格 </a>
                                                        </li>
                                                        <li>
                                                            <a href="#dropdown_simplelineicons" data-toggle="tab"> Simple Line风格</a>
                                                        </li>
                                                        <li>
                                                            <a href="#dropdown_glyphicon" data-toggle="tab"> Glyphicon风格 </a>
                                                        </li>
                                                        <li>
                                                            <a href="#buttons_metro" data-toggle="tab"> Metro风格 </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="portlet-body util-btn-margin-bottom-5">
                                                    <div class="tab-content">
                                                        <div class="tab-pane active" id="dropdown_fontawesome">
                                                            <div class="clearfix">
                                                                <h4 class="block">大按钮</h4>
                                                                <a href="javascript:;" class="btn btn-lg default"> Default
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg red"> Red
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg blue">
                                                                    <i class="fa fa-file-o"></i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-lg green"> Green
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg yellow"> Yellow
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg purple">
                                                                    <i class="fa fa-times"></i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-lg green"> Green
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg grey"> Dark
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认按钮</h4>
                                                                <a href="javascript:;" class="btn default"> Default
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn red"> Red
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn blue">
                                                                    <i class="fa fa-file-o"></i> Blue </a>
                                                                <a href="javascript:;" class="btn green"> Green
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn yellow"> Yellow
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn purple">
                                                                    <i class="fa fa-times"></i> Purple </a>
                                                                <a href="javascript:;" class="btn green"> Green
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn grey"> Dark
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">小按钮</h4>
                                                                <a href="javascript:;" class="btn btn-sm default"> Default
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm red"> Red
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm blue">
                                                                    <i class="fa fa-file-o"></i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm yellow"> Yellow
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm purple">
                                                                    <i class="fa fa-times"></i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm grey"> Dark
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">Extra Small</h4>
                                                                <a href="javascript:;" class="btn btn-sm default"> Default
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm red"> Red
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm blue">
                                                                    <i class="fa fa-file-o"></i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm yellow"> Yellow
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm purple">
                                                                    <i class="fa fa-times"></i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm grey"> Dark
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">只带图标的按钮</h4>
                                                                <a href="javascript:;" class="btn btn-icon-only default">
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only red">
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only blue">
                                                                    <i class="fa fa-file-o"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only green">
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only yellow">
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only purple">
                                                                    <i class="fa fa-times"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only green">
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only grey">
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane" id="dropdown_glyphicon">
                                                            <div class="clearfix">
                                                                <h4 class="block">大按钮</h4>
                                                                <a href="javascript:;" class="btn btn-lg default"> Default
                                                                    <span class="glyphicon glyphicon-cog"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg red"> Red
                                                                    <span class="glyphicon glyphicon-calendar"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg blue">
                                                                    <span class="glyphicon glyphicon-font"> </span> Blue </a>
                                                                <a href="javascript:;" class="btn btn-lg green"> Green
                                                                    <span class="glyphicon glyphicon-gift"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg yellow"> Yellow
                                                                    <span class="glyphicon glyphicon-pencil"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg purple">
                                                                    <span class="glyphicon glyphicon-tag"> </span> Purple </a>
                                                                <a href="javascript:;" class="btn btn-lg green"> Green
                                                                    <span class="glyphicon glyphicon-user"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg grey"> Dark
                                                                    <span class="glyphicon glyphicon-link"> </span>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认按钮</h4>
                                                                <a href="javascript:;" class="btn default"> Default
                                                                    <span class="glyphicon glyphicon-cog"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn red"> Red
                                                                    <span class="glyphicon glyphicon-calendar"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn blue">
                                                                    <span class="glyphicon glyphicon-font"> </span> Blue </a>
                                                                <a href="javascript:;" class="btn green"> Green
                                                                    <span class="glyphicon glyphicon-gift"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn yellow"> Yellow
                                                                    <span class="glyphicon glyphicon-pencil"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn purple">
                                                                    <span class="glyphicon glyphicon-tag"> </span> Purple </a>
                                                                <a href="javascript:;" class="btn green"> Green
                                                                    <span class="glyphicon glyphicon-user"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn grey"> Dark
                                                                    <span class="glyphicon glyphicon-link"> </span>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">小按钮</h4>
                                                                <a href="javascript:;" class="btn btn-sm default"> Default
                                                                    <span class="glyphicon glyphicon-cog"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm red"> Red
                                                                    <span class="glyphicon glyphicon-calendar"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm blue">
                                                                    <span class="glyphicon glyphicon-font"> </span> Blue </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <span class="glyphicon glyphicon-gift"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm yellow"> Yellow
                                                                    <span class="glyphicon glyphicon-pencil"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm purple">
                                                                    <span class="glyphicon glyphicon-tag"> </span> Purple </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <span class="glyphicon glyphicon-user"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm grey"> Dark
                                                                    <span class="glyphicon glyphicon-link"> </span>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">更小的按钮</h4>
                                                                <a href="javascript:;" class="btn btn-sm default"> Default
                                                                    <i class="glyphicon glyphicon-cog"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm red"> Red
                                                                    <i class="glyphicon glyphicon-calendar"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm blue">
                                                                    <i class="glyphicon glyphicon-font"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="glyphicon glyphicon-gift"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm yellow"> Yellow
                                                                    <i class="glyphicon glyphicon-pencil"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm purple">
                                                                    <i class="glyphicon glyphicon-tag"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="glyphicon glyphicon-user"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm grey"> Dark
                                                                    <i class="glyphicon glyphicon-link"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">只带图标的按钮</h4>
                                                                <a href="javascript:;" class="btn btn-icon-only default">
                                                                    <i class="glyphicon glyphicon-cog"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only red">
                                                                    <i class="glyphicon glyphicon-calendar"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only blue">
                                                                    <i class="glyphicon glyphicon-font"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only green">
                                                                    <i class="glyphicon glyphicon-gift"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only yellow">
                                                                    <i class="glyphicon glyphicon-pencil"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only purple">
                                                                    <i class="glyphicon glyphicon-tag"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only green">
                                                                    <i class="glyphicon glyphicon-user"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only grey">
                                                                    <i class="glyphicon glyphicon-link"> </i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane" id="dropdown_simplelineicons">
                                                            <div class="clearfix">
                                                                <h4 class="block">大按钮</h4>
                                                               
                                                                <a href="javascript:;" class="btn btn-lg red"> Red
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg blue">
                                                                    <i class="icon-screen-desktop"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-lg green"> Green
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg yellow"> Yellow
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg purple">
                                                                    <i class="icon-bell"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-lg green"> Green
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg grey"> Dark
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认按钮</h4>
                                                              
                                                                <a href="javascript:;" class="btn red"> Red
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn blue">
                                                                    <i class="icon-screen-desktop"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn green"> Green
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn yellow"> Yellow
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn purple">
                                                                    <i class="icon-bell"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn green"> Green
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn grey"> Dark
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">小按钮</h4>
                                                              
                                                                <a href="javascript:;" class="btn btn-sm red"> Red
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm blue">
                                                                    <i class="icon-screen-desktop"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm yellow"> Yellow
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm purple">
                                                                    <i class="icon-bell"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm grey"> Dark
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">更小的按钮</h4>
                                                               
                                                                <a href="javascript:;" class="btn btn-sm red"> Red
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm blue">
                                                                    <i class="icon-screen-desktop"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm yellow"> Yellow
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm purple">
                                                                    <i class="icon-bell"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-sm green"> Green
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-sm grey"> Dark
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">只带图标的按钮</h4>
                                                              
                                                                <a href="javascript:;" class="btn btn-icon-only red">
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only blue">
                                                                    <i class="icon-screen-desktop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only green">
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only yellow">
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only purple">
                                                                    <i class="icon-bell"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only green">
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-icon-only grey">
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane " id="buttons_metro">
                                                            <div class="clearfix">
                                                                <h4 class="block">大图标按钮</h4>
                                                                <a href="javascript:;" class="btn btn-lg default m-icon-big"> Submit
                                                                    <i class="m-icon-big-swapleft"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg green m-icon-big"> Submit
                                                                    <i class="m-icon-big-swapright m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg blue m-icon-big"> Submit
                                                                    <i class="m-icon-big-swapdown m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg dark m-icon-big"> Submit
                                                                    <i class="m-icon-big-swapup m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">只带大图标的按钮</h4>
                                                                <a href="javascript:;" class="btn btn-lg default m-icon-big m-icon-only">
                                                                    <i class="m-icon-big-swapleft"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg green m-icon-big m-icon-only">
                                                                    <i class="m-icon-big-swapright m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg blue m-icon-big m-icon-only">
                                                                    <i class="m-icon-big-swapdown m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-lg dark m-icon-big m-icon-only">
                                                                    <i class="m-icon-big-swapup m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">块式大图标按钮</h4>
                                                                <button class="btn blue btn-block btn-lg m-icon-big">Button
                                                                    <i class="m-icon-big-swapright m-icon-white"></i>
                                                                </button>
                                                                <a href="javascript:;" class="btn green btn-block btn-lg m-icon-big"> Link
                                                                    <i class="m-icon-big-swapright m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认图标按钮</h4>
                                                                <a href="javascript:;" class="btn default m-icon"> Submit
                                                                    <i class="m-icon-swapleft"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn green m-icon"> Submit
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn blue m-icon"> Submit
                                                                    <i class="m-icon-swapdown m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn dark m-icon"> Submit
                                                                    <i class="m-icon-swapup m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认只带图标按钮</h4>
                                                                <a href="javascript:;" class="btn default m-icon m-icon-only">
                                                                    <i class="m-icon-swapleft"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn green m-icon m-icon-only">
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn blue m-icon m-icon-only">
                                                                    <i class="m-icon-swapdown m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn dark m-icon m-icon-only">
                                                                    <i class="m-icon-swapup m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认块式只带图标按钮</h4>
                                                                <button class="btn blue btn-block m-icon">Button
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </button>
                                                                <a href="javascript:;" class="btn green btn-block m-icon"> Link
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">Font Awesome 风格按钮</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body">
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-group"></i>
                                                        <div> Users </div>
                                                        <span class="badge badge-danger"> 2 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-barcode"></i>
                                                        <div> Products </div>
                                                        <span class="badge badge-success"> 4 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-bar-chart-o"></i>
                                                        <div> Reports </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-sitemap"></i>
                                                        <div> Categories </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-calendar"></i>
                                                        <div> Calendar </div>
                                                        <span class="badge badge-success"> 4 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-envelope"></i>
                                                        <div> Inbox </div>
                                                        <span class="badge badge-info"> 12 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-bullhorn"></i>
                                                        <div> Notification </div>
                                                        <span class="badge badge-danger"> 3 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-map-marker"></i>
                                                        <div> Locations </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-money">
                                                            <i></i>
                                                        </i>
                                                        <div> Finance </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-plane"></i>
                                                        <div> Projects </div>
                                                        <span class="badge badge-info"> 21 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-thumbs-up"></i>
                                                        <div> Feedback </div>
                                                        <span class="badge badge-info"> 2 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-cloud"></i>
                                                        <div> Servers </div>
                                                        <span class="badge badge-danger"> 2 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-globe"></i>
                                                        <div> Regions </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-heart-o"></i>
                                                        <div> Popularity </div>
                                                        <span class="badge badge-info"> 221 </span>
                                                    </a>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-md-6">
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-red-mint"></i>
                                                        <span class="caption-subject font-red-mint bold uppercase">按钮组</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body">
                                                    <div class="clearfix">
                                                        <h4 class="block">基本例子</h4>
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-default">Left</button>
                                                            <button type="button" class="btn btn-default">Middle</button>
                                                            <button type="button" class="btn btn-default">Right</button>
                                                        </div>
                                                        <div class="btn-group btn-group-solid">
                                                            <button type="button" class="btn red">Left</button>
                                                            <button type="button" class="btn yellow">Middle</button>
                                                            <button type="button" class="btn green">Right</button>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">Toolbar按钮</h4>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-default">1</button>
                                                                <button type="button" class="btn btn-default">2</button>
                                                                <button type="button" class="btn btn-default">3</button>
                                                                <button type="button" class="btn btn-default">4</button>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-default">5</button>
                                                                <button type="button" class="btn btn-default">6</button>
                                                                <button type="button" class="btn btn-default">7</button>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-default">8</button>
                                                            </div>
                                                        </div>
                                                        <div class="btn-toolbar">
                                                            <div class="btn-group btn-group-solid">
                                                                <button type="button" class="btn red">1</button>
                                                                <button type="button" class="btn green">2</button>
                                                                <button type="button" class="btn blue">3</button>
                                                                <button type="button" class="btn yellow">4</button>
                                                            </div>
                                                            <div class="btn-group btn-group-solid">
                                                                <button type="button" class="btn purple">5</button>
                                                                <button type="button" class="btn dark">6</button>
                                                                <button type="button" class="btn default">7</button>
                                                            </div>
                                                            <div class="btn-group btn-group-solid">
                                                                <button type="button" class="btn red">8</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">各种尺寸按钮组</h4>
                                                        <div class="btn-toolbar">
                                                            <div class="btn-group btn-group-lg btn-group-solid margin-bottom-10">
                                                                <button type="button" class="btn red">Left</button>
                                                                <button type="button" class="btn green">Middle</button>
                                                                <button type="button" class="btn blue">Right</button>
                                                            </div>
                                                        </div>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group btn-group-solid">
                                                                <button type="button" class="btn red">Left</button>
                                                                <button type="button" class="btn green">Middle</button>
                                                                <button type="button" class="btn blue">Right</button>
                                                            </div>
                                                        </div>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group btn-group-sm btn-group-solid">
                                                                <button type="button" class="btn red">Left</button>
                                                                <button type="button" class="btn green">Middle</button>
                                                                <button type="button" class="btn blue">Right</button>
                                                            </div>
                                                        </div>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group btn-group-xs btn-group-solid">
                                                                <button type="button" class="btn red">Left</button>
                                                                <button type="button" class="btn green">Middle</button>
                                                                <button type="button" class="btn blue">Right</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">Nesting风格按钮组</h4>
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-default">
                                                                <i class="fa fa-user"></i> Profile</button>
                                                            <button type="button" class="btn btn-default">
                                                                <i class="fa fa-cogs"></i> Settings</button>
                                                            <button type="button" class="btn btn-default">
                                                                <i class="fa fa-bullhorn"></i> Feeds</button>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-ellipsis-horizontal"></i> More
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="clearfix margin-bottom-10"> </div>
                                                        <div class="btn-group btn-group-solid">
                                                            <button type="button" class="btn red">
                                                                <i class="fa fa-user"></i> Profile</button>
                                                            <button type="button" class="btn green">
                                                                <i class="fa fa-cogs"></i> Settings</button>
                                                            <button type="button" class="btn purple">
                                                                <i class="fa fa-bullhorn"></i> Feeds</button>
                                                            <div class="btn-group btn-group-solid">
                                                                <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-ellipsis-horizontal"></i> More
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">垂直按钮</h4>
                                                        <div class="btn-group-vertical margin-right-10">
                                                            <button type="button" class="btn btn-default">Button</button>
                                                            <div class="btn-group">
                                                                <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <button type="button" class="btn btn-default">Button</button>
                                                            <div class="btn-group">
                                                                <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="btn-group-vertical btn-group-solid">
                                                            <button type="button" class="btn green">Button</button>
                                                            <div class="btn-group">
                                                                <button id="btnGroupVerticalDrop5" type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop5">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <button type="button" class="btn dark">Button</button>
                                                            <div class="btn-group">
                                                                <button id="btnGroupVerticalDrop8" type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop8">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">链接按钮</h4>
                                                        <div class="btn-group btn-group-justified">
                                                            <a href="javascript:;" class="btn btn-default"> Left </a>
                                                            <a href="javascript:;" class="btn btn-default"> Middle </a>
                                                            <a href="javascript:;" class="btn btn-default"> Right </a>
                                                        </div>
                                                        <div class="clearfix margin-bottom-10"> </div>
                                                        <div class="btn-group btn-group btn-group-justified">
                                                            <a href="javascript:;" class="btn red"> Left </a>
                                                            <a href="javascript:;" class="btn blue"> Middle </a>
                                                            <a href="javascript:;" class="btn green"> Right </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- END BLOCK BUTTONS PORTLET-->
                                            <!-- BEGIN DROPDOWNS PORTLET-->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">下拉框</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body">
                                                    <div class="tab-content">
                                                        <div class="tab-pane active" id="dropdown_1">
                                                            <h4 class="block">下拉框按钮</h4>
                                                            <div class="btn-group">
                                                                <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="javascript:;"> 工具栏
                                                                    <i class="fa fa-angle-down"></i>
                                                                </a>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> 设置
                                                                            <span class="badge badge-success"> 3 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> 我的信息 </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> 窗体设置 </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> 帮助
                                                                            <span class="badge badge-danger"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button class="btn red dropdown-toggle" data-toggle="dropdown">Primary
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action
                                                                            <span class="badge badge-warning"> 2 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link
                                                                            <span class="badge badge-info"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button class="btn purple dropdown-toggle" data-toggle="dropdown">Success
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action
                                                                            <span class="badge badge-inverse"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link
                                                                            <span class="badge"> 4 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-toolbar hide">
                                                                <div class="btn-group">
                                                                    <button class="btn green dropdown-toggle" data-toggle="dropdown">Success
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                                <div class="btn-group">
                                                                    <button class="btn blue dropdown-toggle" data-toggle="dropdown">Info
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                                <div class="btn-group">
                                                                    <button class="btn black dropdown-toggle" data-toggle="dropdown">Inverse
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu opens-left">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                            </div>
                                                            <h4 class="block">带图标下拉按钮</h4>
                                                            <div class="btn-toolbar">
                                                                <div class="btn-group">
                                                                    <a class="btn green" href="javascript:;" data-toggle="dropdown">
                                                                        <i class="fa fa-user"></i> 用户
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-pencil"></i> 编辑 </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-trash-o"></i> 删除 </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-ban"></i> 新增 </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="i"></i> Make admin </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <div class="btn-group">
                                                                    <a class="btn purple" href="javascript:;" data-toggle="dropdown">
                                                                        <i class="fa fa-user"></i> 设置
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-plus"></i> Add </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-trash-o"></i> Edit </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-times"></i> Delete </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="i"></i> Full Settings </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="well margin-top-10">
                                                                <h4>下拉框按钮设置</h4>
                                                                <div class="btn-group">
                                                                    <button class="btn blue dropdown-toggle" data-toggle="dropdown">Info
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu bottom-up">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <div class="btn-group">
                                                                    <button class="btn black dropdown-toggle" data-toggle="dropdown">Inverse
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu bottom-up">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <p>
                                                                    <span class="label label-success"> 备注: </span> &nbsp; 通过<code>bottom-up</code> 设置下拉菜单方向！ </p>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane" id="dropdown_2">
                                                            <h4 class="block">Hoverable式下拉按钮</h4>
                                                            <div class="btn-group">
                                                                <a class="btn dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true" href="javascript:;"> Tools
                                                                    <i class="fa fa-angle-down"></i>
                                                                </a>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Settings
                                                                            <span class="badge badge-success"> 3 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Preferences </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Window Options </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Help
                                                                            <span class="badge badge-danger"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button class="btn red dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Primary
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action
                                                                            <span class="badge badge-warning"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action
                                                                            <span class="badge badge-danger"> 2 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link
                                                                            <span class="badge badge-info"> 4 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button class="btn purple dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Success
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action
                                                                            <span class="badge badge-inverse"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link
                                                                            <span class="badge"> 4 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-toolbar hide">
                                                                <div class="btn-group">
                                                                    <button class="btn green dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Success
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                                <div class="btn-group">
                                                                    <button class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Info
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                                <div class="btn-group">
                                                                    <button class="btn black dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Inverse
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu opens-left">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                            </div>
                                                            <h4 class="block">Hoverable式带图标下拉按钮</h4>
                                                            <div class="btn-toolbar">
                                                                <div class="btn-group">
                                                                    <a class="btn green" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                        <i class="fa fa-user"></i> User
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-pencil"></i> Edit </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-trash-o"></i> Delete </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-ban"></i> Ban </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="i"></i> Make admin </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <div class="btn-group">
                                                                    <a class="btn purple" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                        <i class="fa fa-user"></i> Settings
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-plus"></i> Add </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-trash-o"></i> Edit </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-times"></i> Delete </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="i"></i> Full Settings </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="well">
                                                                <h4 class="block">Hoverable式带checkbox按钮</h4>
                                                                <div class="btn-group">
                                                                    <a class="btn green" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> Options #1
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <div class="dropdown-menu hold-on-click dropdown-checkboxes">
                                                                        <label>
                                                                            <input type="checkbox">Option 1</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 2</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 3</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 4</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 5</label>
                                                                    </div>
                                                                </div>
                                                                <div class="btn-group">
                                                                    <a class="btn red" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> Options #2
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <div class="dropdown-menu hold-on-click dropdown-checkboxes">
                                                                        <label>
                                                                            <input type="checkbox">Option 1</label>
                                                                        <label>
                                                                            <input type="checkbox" checked>Option 2</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 3</label>
                                                                        <label>
                                                                            <input type="checkbox" checked>Option 4</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 5</label>
                                                                    </div>
                                                                </div>
                                                                <p>
                                                                    <span class="label label-success"> 备注: </span> &nbsp; 通过设置<code>hold-on-click</code> 属性可以避免下拉框关闭 </p>
                                                            </div>
                                                            <div class="well">
                                                                <h4 class="block">Hoverable下拉按钮</h4>
                                                                <div class="btn-group">
                                                                    <button class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Info
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu bottom-up">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                                <div class="btn-group">
                                                                    <button class="btn black dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Inverse
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu bottom-up">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <p>
                                                                    <span class="label label-success"> 备注: </span> &nbsp; 通过添加<code>bottom-up</code> 可以让你改变下拉方向！ </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- END DROPDOWNS PORTLET-->
                                            <!-- BEGIN DROPDOWNS PORTLET-->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">下拉按钮</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body util-btn-group-margin-bottom-5">
                                                    <div class="clearfix">
                                                        <h4 class="block">默认Bootstrap风格</h4>
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-default">Default</button>
                                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-primary">Primary</button>
                                                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-success">Success</button>
                                                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-info">Info</button>
                                                            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-warning">Warning</button>
                                                            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-danger">Danger</button>
                                                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">Metronic Style</h4>
                                                        <div class="btn-group">
                                                            <button type="button" class="btn default">Default</button>
                                                            <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn blue">Blue</button>
                                                            <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn green">Green</button>
                                                            <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn red">Red</button>
                                                            <button type="button" class="btn red dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn yellow">Yellow</button>
                                                            <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn dark">Dark</button>
                                                            <button type="button" class="btn dark dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn purple">Purple</button>
                                                            <button type="button" class="btn purple dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">多级下拉按钮</h4>
                                                        <!-- 大尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn blue dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li class="dropdown-submenu">
                                                                    <a href="javascript:;"> More options </a>
                                                                    <ul class="dropdown-menu" style="">
                                                                        <li>
                                                                            <a href="javascript:;"> Second level link </a>
                                                                        </li>
                                                                        <li class="dropdown-submenu">
                                                                            <a href="javascript:;"> More options </a>
                                                                            <ul class="dropdown-menu">
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="btn-group dropup">
                                                            <button class="btn green dropdown-toggle" type="button" data-toggle="dropdown"> Dropup
                                                                <i class="fa fa-angle-up"></i>
                                                            </button>
                                                            <ul class="dropdown-menu pull-right" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li class="dropdown-submenu">
                                                                    <a href="javascript:;"> More options </a>
                                                                    <ul class="dropdown-menu" style="">
                                                                        <li>
                                                                            <a href="javascript:;"> Second level link </a>
                                                                        </li>
                                                                        <li class="dropdown-submenu">
                                                                            <a href="javascript:;"> More options </a>
                                                                            <ul class="dropdown-menu pull-right">
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">各种尺寸按钮</h4>
                                                        <!-- 大尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> 大尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- 小尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 小尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- 更小尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 更小尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="clearfix margin-bottom-10"> </div>
                                                        <!-- 大尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn red btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> 大尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- 小尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn blue btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 小尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- 更小尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn green btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 更小尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">下拉按钮</h4>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group dropup">
                                                                <button type="button" class="btn btn-default">Dropup</button>
                                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group dropup">
                                                                <button type="button" class="btn btn-primary">Right dropup</button>
                                                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu pull-right" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                        </div>
                                                        <div class="btn-toolbar">
                                                            <div class="btn-group dropup">
                                                                <button type="button" class="btn blue">Dropup</button>
                                                                <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group dropup">
                                                                <button type="button" class="btn green">Right dropup</button>
                                                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu pull-right" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">Hoveralbe下拉按钮</h4>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-default">Dropdown</button>
                                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group dropup">
                                                                <button type="button" class="btn btn-primary">Dropup</button>
                                                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> Dropup
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                        </div>
                                                        <div class="btn-toolbar">
                                                            <div class="btn-group">
                                                                <button type="button" class="btn blue">Dropdown</button>
                                                                <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group dropup">
                                                                <button type="button" class="btn green">Dropup</button>
                                                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group">
                                                                <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">带Checkboxes和搜索表单的下拉按钮</h4>
                                                        <div class="btn-group">
                                                            <button class="btn green dropdown-toggle" type="button" data-toggle="dropdown"> Search Dropdown
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <div class="dropdown-menu dropdown-content input-large hold-on-click" role="menu">
                                                                <form action="#">
                                                                    <div class="input-group">
                                                                        <input type="text" class="form-control" placeholder="search...">
                                                                        <span class="input-group-btn">
                                                                            <button class="btn blue" type="submit">Go!</button>
                                                                        </span>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                        <div class="btn-group">
                                                            <button type="button" class="btn blue">Dropdown</button>
                                                            <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <div class="dropdown-menu hold-on-click dropdown-checkboxes" role="menu">
                                                                <label>
                                                                    <input type="checkbox">Option 1</label>
                                                                <label>
                                                                    <input type="checkbox" checked>Option 2</label>
                                                                <label>
                                                                    <input type="checkbox">Option 3</label>
                                                                <label>
                                                                    <input type="checkbox" checked>Option 4</label>
                                                                <label>
                                                                    <input type="checkbox">Option 5</label>
                                                            </div>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group dropup">
                                                            <button type="button" class="btn green">Dropup</button>
                                                            <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-up"></i>
                                                            </button>
                                                            <div class="dropdown-menu hold-on-click dropdown-checkboxes" role="menu">
                                                                <label>
                                                                    <input type="checkbox">Option 1</label>
                                                                <label>
                                                                    <input type="checkbox" checked>Option 2</label>
                                                                <label>
                                                                    <input type="checkbox">Option 3</label>
                                                                <label>
                                                                    <input type="checkbox" checked>Option 4</label>
                                                                <label>
                                                                    <input type="checkbox">Option 5</label>
                                                            </div>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="clearfix margin-top-10">
                                                            <span class="label label-success"> 备注: </span> &nbsp; 通过设置<code>hold-on-click</code>防止菜单关闭！ </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">带单选的下拉按钮</h4>
                                                        <div class="btn-group">
                                                            <button type="button" class="btn blue">Dropdown</button>
                                                            <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <div class="dropdown-menu hold-on-click dropdown-radiobuttons" role="menu">
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 1</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 2</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 3</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 4</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 5</label>
                                                            </div>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group dropup">
                                                            <button type="button" class="btn green">Dropup</button>
                                                            <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-up"></i>
                                                            </button>
                                                            <div class="dropdown-menu hold-on-click dropdown-radiobuttons" role="menu">
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 1</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 2</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 3</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 4</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 5</label>
                                                            </div>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="clearfix margin-top-10">
                                                            <span class="label label-success"> 备注: </span> &nbsp; 通过设置<code>hold-on-click</code>防止菜单关闭！ </div>
                                                    </div>
                                                </div>
                                                <!-- END DROPDOWNS PORTLET-->
                                            </div>
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">按钮状态</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body util-btn-margin-bottom-5">
                                                    <h4>loading</h4>
                                                    <div class="clearfix">
                                                        <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn btn-primary"> Loading state </button>
                                                        <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn btn-default"> Loading state </button>
                                                        <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn red"> Loading state </button>
                                                        <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn blue"> Loading state </button>
                                                    </div>
                                                    <h4>Single Toggle</h4>
                                                    <div class="clearfix">
                                                        <button type="button" class="btn btn-primary" data-toggle="button"> Single toggle </button>
                                                        <button type="button" class="btn btn-default" data-toggle="button"> Single toggle </button>
                                                        <button type="button" class="btn red" data-toggle="button"> Single toggle </button>
                                                        <button type="button" class="btn blue" data-toggle="button"> Single toggle </button>
                                                    </div>
                                                    <h4>Checkbox</h4>
                                                    <div class="clearfix">
                                                        <div class="btn-group" data-toggle="buttons">
                                                            <label class="btn default active">
                                                                <input type="checkbox" class="toggle"> Option 1 </label>
                                                            <label class="btn default">
                                                                <input type="checkbox" class="toggle"> Option 2 </label>
                                                            <label class="btn default">
                                                                <input type="checkbox" class="toggle"> Option 3 </label>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <div class="btn-group" data-toggle="buttons">
                                                            <label class="btn btn-default">
                                                                <input type="checkbox" class="toggle"> Option 1 </label>
                                                            <label class="btn btn-default active">
                                                                <input type="checkbox" class="toggle"> Option 2 </label>
                                                            <label class="btn btn-default">
                                                                <input type="checkbox" class="toggle"> Option 3 </label>
                                                        </div>
                                                    </div>
                                                    <h4>Radio</h4>
                                                    <div class="clearfix">
                                                        <div class="btn-group" data-toggle="buttons">
                                                            <label class="btn blue active">
                                                                <input type="radio" class="toggle"> Option 1 </label>
                                                            <label class="btn blue">
                                                                <input type="radio" class="toggle"> Option 2 </label>
                                                            <label class="btn blue">
                                                                <input type="radio" class="toggle"> Option 3 </label>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <div class="btn-group" data-toggle="buttons">
                                                            <label class="btn btn-default active">
                                                                <input type="radio" class="toggle"> Option 1 </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" class="toggle"> Option 2 </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" class="toggle"> Option 3 </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab_1_2">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <!-- BEGIN BUTTONS PORTLET-->
                                            <div class="portlet light tasks-widget bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <span class="caption-subject font-green-haze bold uppercase">按钮</span>
                                                        <span class="caption-helper">任务统计...</span>
                                                    </div>
                                                    <div class="actions">
                                                        <div class="btn-group">
                                                            <a class="btn btn-circle green-haze btn-outline btn-circle btn-sm" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> Actions
                                                                <i class="fa fa-angle-down"></i>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li>
                                                                    <a href="javascript:;">
                                                                        <i class="i"></i> Option 1</a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;">Option 2</a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;">Option 3</a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;">Option 4</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="portlet-body util-btn-margin-bottom-5">
                                                    <div class="clearfix">
                                                        <h4 class="block">默认bootstrap风格</h4>
                                                        <!-- Standard gray button with gradient -->
                                                        <button type="button" class="btn btn-circle btn-default">Default</button>
                                                        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                                        <button type="button" class="btn btn-circle btn-primary">Primary</button>
                                                        <!-- Indicates a successful or positive action -->
                                                        <button type="button" class="btn btn-circle btn-success">Success</button>
                                                        <!-- Contextual button for informational alert messages -->
                                                        <button type="button" class="btn btn-circle btn-info">Info</button>
                                                        <!-- Indicates caution should be taken with this action -->
                                                        <button type="button" class="btn btn-circle btn-warning">Warning</button>
                                                        <!-- Indicates a dangerous or potentially negative action -->
                                                        <button type="button" class="btn btn-circle btn-danger">Danger</button>
                                                        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                                                        <button type="button" class="btn btn-circle btn-link">Link</button>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">用户自定义风格</h4>
                                                        <p>
                                                            <button type="button" class="btn btn-circle default">Default</button>
                                                            <button type="button" class="btn btn-circle red">Red</button>
                                                            <button type="button" class="btn btn-circle blue">Blue</button>
                                                            <button type="button" class="btn btn-circle green">Green</button>
                                                            <button type="button" class="btn btn-circle yellow">Yellow</button>
                                                            <button type="button" class="btn btn-circle purple">Purple</button>
                                                            <button type="button" class="btn btn-circle dark">Dark</button>
                                                        </p>
                                                      
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">Outline风格按钮</h4>
                                                        <p>
                                                            <button type="button" class="btn btn-circle default btn-outline">Default</button>
                                                            <button type="button" class="btn btn-circle red btn-outline">Red</button>
                                                            <button type="button" class="btn btn-circle blue btn-outline">Blue</button>
                                                            <button type="button" class="btn btn-circle green btn-outline">Green</button>
                                                            <button type="button" class="btn btn-circle yellow btn-outline">Yellow</button>
                                                            <button type="button" class="btn btn-circle purple btn-outline">Purple</button>
                                                            <button type="button" class="btn btn-circle dark btn-outline">Dark</button>
                                                        </p>
                                                       
                                                    </div>
                                                  
                                                    <div class="clearfix">
                                                        <h4 class="block">带条纹按钮</h4>
                                                        <a href="javascript:;" class="btn btn-circle default red-stripe"> Red </a>
                                                        <a href="javascript:;" class="btn btn-circle default blue-stripe"> Blue </a>
                                                        <a href="javascript:;" class="btn btn-circle default green-stripe"> Green </a>
                                                        <a href="javascript:;" class="btn btn-circle default yellow-stripe"> Yellow </a>
                                                        <a href="javascript:;" class="btn btn-circle default purple-stripe"> Purple </a>
                                                        <a href="javascript:;" class="btn btn-circle default green-stripe"> Green </a>
                                                        <a href="javascript:;" class="btn btn-circle default dark-stripe"> Dark </a>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">禁用按钮</h4>
                                                        <a href="javascript:;" class="btn btn-circle default disabled"> Default </a>
                                                        <a href="javascript:;" class="btn btn-circle red disabled"> Red </a>
                                                        <a href="javascript:;" class="btn btn-circle blue disabled"> Blue </a>
                                                        <a href="javascript:;" class="btn btn-circle green disabled"> Green </a>
                                                        <a href="javascript:;" class="btn btn-circle yellow disabled"> Yellow </a>
                                                        <a href="javascript:;" class="btn btn-circle purple disabled"> Purple </a>
                                                        <a href="javascript:;" class="btn btn-circle dark disabled"> Dark </a>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">不同尺寸按钮</h4>
                                                        <button type="button" class="btn btn-circle default btn-lg">大尺寸按钮</button>
                                                        <button type="button" class="btn btn-circle red">标准尺寸按钮</button>
                                                        <button type="button" class="btn btn-circle blue btn-sm">小尺寸按钮</button>
                                                        <button type="button" class="btn btn-circle green btn-sm">更小尺寸按钮</button>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">带标签按钮</h4>
                                                        <a href="javascript:;" class="btn btn-circle default"> Link </a>
                                                        <button class="btn btn-circle default">Button</button>
                                                        <input type="button" class="btn btn-circle default" value="Input">
                                                        <input type="submit" class="btn btn-circle default" value="Submit"> </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">块式按钮</h4>
                                                        <a href="javascript:;" class="btn btn-circle default btn-block"> Link </a>
                                                        <button class="btn btn-circle blue btn-block">Button</button>
                                                        <input type="button" class="btn btn-circle red btn-block" value="Input">
                                                        <input type="submit" class="btn btn-circle purple btn-block" value="Submit">
                                                        <button class="btn btn-circle blue btn-block btn-outline ">Button</button>
                                                        <input type="button" class="btn btn-circle red btn-outline btn-block" value="Input">
                                                        <input type="submit" class="btn btn-circle purple btn-outline  btn-block" value="Submit">
                                                      </div>
                                                </div>
                                            </div>
                                            <!-- END BUTTONS PORTLET-->
                                            <!-- BEGIN BUTTONS WITH ICONS PORTLET-->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title tabbable-line">
                                                    <div class="caption">
                                                        <i class="icon-globe font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">Iconic风格按钮</span>
                                                    </div>
                                                    <ul class="nav nav-tabs">
                                                        <li class="active">
                                                            <a href="#dropdown_fontawesome_1" data-toggle="tab"> Fontawesome风格按钮 </a>
                                                        </li>
                                                        <li>
                                                            <a href="#dropdown_simplelineicons_1" data-toggle="tab"> Simple Line风格按钮</a>
                                                        </li>
                                                        <li>
                                                            <a href="#dropdown_glyphicon_1" data-toggle="tab"> Glyphicon风格按钮 </a>
                                                        </li>
                                                        <li>
                                                            <a href="#buttons_metro_1" data-toggle="tab"> Metro风格按钮 </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="portlet-body util-btn-margin-bottom-5">
                                                    <div class="tab-content">
                                                        <div class="tab-pane active" id="dropdown_fontawesome_1">
                                                            <div class="clearfix">
                                                                <h4 class="block">大按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg default"> Default
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg red"> Red
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg blue">
                                                                    <i class="fa fa-file-o"></i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg green"> Green
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg yellow"> Yellow
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg purple">
                                                                    <i class="fa fa-times"></i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg green"> Green
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg grey"> Dark
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle default"> Default
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle red"> Red
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle blue">
                                                                    <i class="fa fa-file-o"></i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle green"> Green
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle yellow"> Yellow
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle purple">
                                                                    <i class="fa fa-times"></i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle green"> Green
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle grey"> Dark
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">小按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm default"> Default
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm red"> Red
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm blue">
                                                                    <i class="fa fa-file-o"></i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm yellow"> Yellow
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm purple">
                                                                    <i class="fa fa-times"></i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm grey"> Dark
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">很小的按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm default"> Default
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm red"> Red
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm blue">
                                                                    <i class="fa fa-file-o"></i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm yellow"> Yellow
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm purple">
                                                                    <i class="fa fa-times"></i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm grey"> Dark
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">只带图标的按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only default">
                                                                    <i class="fa fa-user"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only red">
                                                                    <i class="fa fa-edit"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only blue">
                                                                    <i class="fa fa-file-o"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only green">
                                                                    <i class="fa fa-font"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only yellow">
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only purple">
                                                                    <i class="fa fa-times"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only green">
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only grey">
                                                                    <i class="fa fa-link"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane" id="dropdown_simplelineicons_1">
                                                            <div class="clearfix">
                                                                <h4 class="block">大按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg default"> Default
                                                                    <span class="glyphicon glyphicon-cog"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg red"> Red
                                                                    <span class="glyphicon glyphicon-calendar"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg blue">
                                                                    <span class="glyphicon glyphicon-font"> </span> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg green"> Green
                                                                    <span class="glyphicon glyphicon-gift"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg yellow"> Yellow
                                                                    <span class="glyphicon glyphicon-pencil"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg purple">
                                                                    <span class="glyphicon glyphicon-tag"> </span> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg green"> Green
                                                                    <span class="glyphicon glyphicon-user"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg grey"> Dark
                                                                    <span class="glyphicon glyphicon-link"> </span>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle default"> Default
                                                                    <span class="glyphicon glyphicon-cog"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle red"> Red
                                                                    <span class="glyphicon glyphicon-calendar"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle blue">
                                                                    <span class="glyphicon glyphicon-font"> </span> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle green"> Green
                                                                    <span class="glyphicon glyphicon-gift"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle yellow"> Yellow
                                                                    <span class="glyphicon glyphicon-pencil"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle purple">
                                                                    <span class="glyphicon glyphicon-tag"> </span> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle green"> Green
                                                                    <span class="glyphicon glyphicon-user"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle grey"> Dark
                                                                    <span class="glyphicon glyphicon-link"> </span>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">小按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm default"> Default
                                                                    <span class="glyphicon glyphicon-cog"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm red"> Red
                                                                    <span class="glyphicon glyphicon-calendar"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm blue">
                                                                    <span class="glyphicon glyphicon-font"> </span> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <span class="glyphicon glyphicon-gift"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm yellow"> Yellow
                                                                    <span class="glyphicon glyphicon-pencil"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm purple">
                                                                    <span class="glyphicon glyphicon-tag"> </span> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <span class="glyphicon glyphicon-user"> </span>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm grey"> Dark
                                                                    <span class="glyphicon glyphicon-link"> </span>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">更小的按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm default"> Default
                                                                    <i class="glyphicon glyphicon-cog"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm red"> Red
                                                                    <i class="glyphicon glyphicon-calendar"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm blue">
                                                                    <i class="glyphicon glyphicon-font"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="glyphicon glyphicon-gift"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm yellow"> Yellow
                                                                    <i class="glyphicon glyphicon-pencil"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm purple">
                                                                    <i class="glyphicon glyphicon-tag"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="glyphicon glyphicon-user"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm grey"> Dark
                                                                    <i class="glyphicon glyphicon-link"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">只带图标的按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only default">
                                                                    <i class="glyphicon glyphicon-cog"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only red">
                                                                    <i class="glyphicon glyphicon-calendar"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only blue">
                                                                    <i class="glyphicon glyphicon-font"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only green">
                                                                    <i class="glyphicon glyphicon-gift"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only yellow">
                                                                    <i class="glyphicon glyphicon-pencil"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only purple">
                                                                    <i class="glyphicon glyphicon-tag"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only green">
                                                                    <i class="glyphicon glyphicon-user"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only grey">
                                                                    <i class="glyphicon glyphicon-link"> </i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane" id="dropdown_glyphicon_1">
                                                            <div class="clearfix">
                                                                <h4 class="block">大按钮</h4>
                                                              
                                                                <a href="javascript:;" class="btn btn-circle btn-lg red"> Red
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg blue">
                                                                    <i class="icon-screen-desktop"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg green"> Green
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg yellow"> Yellow
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg purple">
                                                                    <i class="icon-bell"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg green"> Green
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg grey"> Dark
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认按钮</h4>
                                                               
                                                                <a href="javascript:;" class="btn btn-circle red"> Red
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle blue">
                                                                    <i class="icon-screen-desktop"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle green"> Green
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle yellow"> Yellow
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle purple">
                                                                    <i class="icon-bell"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle green"> Green
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle grey"> Dark
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">小按钮</h4>
                                                               
                                                                <a href="javascript:;" class="btn btn-circle btn-sm red"> Red
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm blue">
                                                                    <i class="icon-screen-desktop"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm yellow"> Yellow
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm purple">
                                                                    <i class="icon-bell"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm grey"> Dark
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">更小的按钮</h4>
                                                               
                                                                <a href="javascript:;" class="btn btn-circle btn-sm red"> Red
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm blue">
                                                                    <i class="icon-screen-desktop"> </i> Blue </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm yellow"> Yellow
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm purple">
                                                                    <i class="icon-bell"> </i> Purple </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm green"> Green
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-sm grey"> Dark
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">只带图标的按钮</h4>
                                                               
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only red">
                                                                    <i class="icon-crop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only blue">
                                                                    <i class="icon-screen-desktop"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only green">
                                                                    <i class="icon-badge"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only yellow">
                                                                    <i class="icon-anchor"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only purple">
                                                                    <i class="icon-bell"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only green">
                                                                    <i class="icon-present"> </i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-icon-only grey">
                                                                    <i class="icon-pin"> </i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane" id="buttons_metro_1">
                                                            <div class="clearfix">
                                                                <h4 class="block">大图标按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg default m-icon-big"> Submit
                                                                    <i class="m-icon-big-swapleft"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg green m-icon-big"> Submit
                                                                    <i class="m-icon-big-swapright m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg blue m-icon-big"> Submit
                                                                    <i class="m-icon-big-swapdown m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg dark m-icon-big"> Submit
                                                                    <i class="m-icon-big-swapup m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">只带大图标的按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg default m-icon-big m-icon-only">
                                                                    <i class="m-icon-big-swapleft"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg green m-icon-big m-icon-only">
                                                                    <i class="m-icon-big-swapright m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg blue m-icon-big m-icon-only">
                                                                    <i class="m-icon-big-swapdown m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle btn-lg dark m-icon-big m-icon-only">
                                                                    <i class="m-icon-big-swapup m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">块式大图标按钮</h4>
                                                                <button class="btn btn-circle blue btn-block btn-lg m-icon-big">Button
                                                                    <i class="m-icon-big-swapright m-icon-white"></i>
                                                                </button>
                                                                <a href="javascript:;" class="btn btn-circle green btn-block btn-lg m-icon-big"> Link
                                                                    <i class="m-icon-big-swapright m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认图标按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle default m-icon"> Submit
                                                                    <i class="m-icon-swapleft"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle green m-icon"> Submit
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle blue m-icon"> Submit
                                                                    <i class="m-icon-swapdown m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle dark m-icon"> Submit
                                                                    <i class="m-icon-swapup m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认只带图标按钮</h4>
                                                                <a href="javascript:;" class="btn btn-circle default m-icon m-icon-only">
                                                                    <i class="m-icon-swapleft"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle green m-icon m-icon-only">
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle blue m-icon m-icon-only">
                                                                    <i class="m-icon-swapdown m-icon-white"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-circle dark m-icon m-icon-only">
                                                                    <i class="m-icon-swapup m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                            <div class="clearfix">
                                                                <h4 class="block">默认块式只带图标按钮</h4>
                                                                <button class="btn btn-circle blue btn-block m-icon">Button
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </button>
                                                                <a href="javascript:;" class="btn btn-circle green btn-block m-icon"> Link
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- END BUTTONS WITH ICONS PORTLET-->
                                            <!-- BEGIN BLOCK BUTTONS PORTLET-->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">Font Awesome 风格按钮</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body">
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-group"></i>
                                                        <div> Users </div>
                                                        <span class="badge badge-danger"> 2 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-barcode"></i>
                                                        <div> Products </div>
                                                        <span class="badge badge-success"> 4 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-bar-chart-o"></i>
                                                        <div> Reports </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-sitemap"></i>
                                                        <div> Categories </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-calendar"></i>
                                                        <div> Calendar </div>
                                                        <span class="badge badge-success"> 4 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-envelope"></i>
                                                        <div> Inbox </div>
                                                        <span class="badge badge-info"> 12 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-bullhorn"></i>
                                                        <div> Notification </div>
                                                        <span class="badge badge-danger"> 3 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-map-marker"></i>
                                                        <div> Locations </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-money">
                                                            <i></i>
                                                        </i>
                                                        <div> Finance </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-plane"></i>
                                                        <div> Projects </div>
                                                        <span class="badge badge-info"> 21 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-thumbs-up"></i>
                                                        <div> Feedback </div>
                                                        <span class="badge badge-info"> 2 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-cloud"></i>
                                                        <div> Servers </div>
                                                        <span class="badge badge-danger"> 2 </span>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-globe"></i>
                                                        <div> Regions </div>
                                                    </a>
                                                    <a href="javascript:;" class="icon-btn">
                                                        <i class="fa fa-heart-o"></i>
                                                        <div> Popularity </div>
                                                        <span class="badge badge-info"> 221 </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <!-- BEGIN BLOCK BUTTONS PORTLET-->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-red-mint"></i>
                                                        <span class="caption-subject font-red-mint bold uppercase">按钮组</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body">
                                                    <div class="clearfix">
                                                        <h4 class="block">基本例子</h4>
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn btn-default">Left</button>
                                                            <button type="button" class="btn btn-default">Middle</button>
                                                            <button type="button" class="btn btn-default">Right</button>
                                                        </div>
                                                        <div class="btn-group btn-group-circle btn-group-solid">
                                                            <button type="button" class="btn red">Left</button>
                                                            <button type="button" class="btn yellow">Middle</button>
                                                            <button type="button" class="btn green">Right</button>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">菜单栏按钮</h4>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group btn-group-circle">
                                                                <button type="button" class="btn btn-default">1</button>
                                                                <button type="button" class="btn btn-default">2</button>
                                                                <button type="button" class="btn btn-default">3</button>
                                                                <button type="button" class="btn btn-default">4</button>
                                                            </div>
                                                            <div class="btn-group btn-group-circle">
                                                                <button type="button" class="btn btn-default">5</button>
                                                                <button type="button" class="btn btn-default">6</button>
                                                                <button type="button" class="btn btn-default">7</button>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-circle btn-default">8</button>
                                                            </div>
                                                        </div>
                                                        <div class="btn-toolbar">
                                                            <div class="btn-group btn-group-circle btn-group-solid">
                                                                <button type="button" class="btn red">1</button>
                                                                <button type="button" class="btn green">2</button>
                                                                <button type="button" class="btn blue">3</button>
                                                                <button type="button" class="btn yellow">4</button>
                                                            </div>
                                                            <div class="btn-group btn-group-circle btn-group-solid">
                                                                <button type="button" class="btn purple">5</button>
                                                                <button type="button" class="btn dark">6</button>
                                                                <button type="button" class="btn default">7</button>
                                                            </div>
                                                            <div class="btn-group btn-group-solid">
                                                                <button type="button" class="btn btn-circle red">8</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">各种尺寸按钮组</h4>
                                                        <div class="btn-toolbar">
                                                            <div class="btn-group btn-group-circle btn-group-lg btn-group-solid margin-bottom-10">
                                                                <button type="button" class="btn red">Left</button>
                                                                <button type="button" class="btn green">Middle</button>
                                                                <button type="button" class="btn blue">Right</button>
                                                            </div>
                                                        </div>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group btn-group-circle btn-group-solid">
                                                                <button type="button" class="btn red">Left</button>
                                                                <button type="button" class="btn green">Middle</button>
                                                                <button type="button" class="btn blue">Right</button>
                                                            </div>
                                                        </div>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group btn-group-circle btn-group-sm btn-group-solid">
                                                                <button type="button" class="btn red">Left</button>
                                                                <button type="button" class="btn green">Middle</button>
                                                                <button type="button" class="btn blue">Right</button>
                                                            </div>
                                                        </div>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group btn-group-circle btn-group-xs btn-group-solid">
                                                                <button type="button" class="btn red">Left</button>
                                                                <button type="button" class="btn green">Middle</button>
                                                                <button type="button" class="btn blue">Right</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">Nesting风格按钮组</h4>
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn btn-default">
                                                                <i class="fa fa-user"></i> Profile</button>
                                                            <button type="button" class="btn btn-default">
                                                                <i class="fa fa-cogs"></i> Settings</button>
                                                            <button type="button" class="btn btn-default">
                                                                <i class="fa fa-bullhorn"></i> Feeds</button>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-default btn-circle-right dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-ellipsis-horizontal"></i> More
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="clearfix margin-bottom-10"> </div>
                                                        <div class="btn-group btn-group-circle btn-group-solid">
                                                            <button type="button" class="btn red">
                                                                <i class="fa fa-user"></i> Profile</button>
                                                            <button type="button" class="btn green">
                                                                <i class="fa fa-cogs"></i> Settings</button>
                                                            <button type="button" class="btn purple">
                                                                <i class="fa fa-bullhorn"></i> Feeds</button>
                                                            <div class="btn-group btn-group-solid">
                                                                <button type="button" class="btn blue  btn-circle-right dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-ellipsis-horizontal"></i> More
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">垂直下拉按钮</h4>
                                                        <div class="btn-group-vertical btn-group-vertical-circle margin-right-10">
                                                            <button type="button" class="btn btn-default">Button</button>
                                                            <div class="btn-group">
                                                                <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <button type="button" class="btn btn-default">Button</button>
                                                            <div class="btn-group">
                                                                <button id="btnGroupVerticalDrop4" type="button" class="btn btn-circle-bottom btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="btn-group-vertical btn-group-vertical-circle btn-group-solid">
                                                            <button type="button" class="btn btn-circle green">Button</button>
                                                            <div class="btn-group">
                                                                <button id="btnGroupVerticalDrop5" type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop5">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <button type="button" class="btn dark">Button</button>
                                                            <div class="btn-group">
                                                                <button id="btnGroupVerticalDrop8" type="button" class="btn btn-circle-bottom yellow dropdown-toggle" data-toggle="dropdown"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop8">
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Dropdown link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">带连接按钮组</h4>
                                                        <div class="btn-group btn-group-circle btn-group-justified">
                                                            <a href="javascript:;" class="btn btn-default"> Left </a>
                                                            <a href="javascript:;" class="btn btn-default"> Middle </a>
                                                            <a href="javascript:;" class="btn btn-default"> Right </a>
                                                        </div>
                                                        <div class="clearfix margin-bottom-10"> </div>
                                                        <div class="btn-group btn-group-circle btn-group btn-group-justified">
                                                            <a href="javascript:;" class="btn red"> Left </a>
                                                            <a href="javascript:;" class="btn blue"> Middle </a>
                                                            <a href="javascript:;" class="btn green"> Right </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- END BLOCK BUTTONS PORTLET-->
                                            <!-- BEGIN DROPDOWNS PORTLET-->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">Dropdowns</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body">
                                                    <div class="tab-content">
                                                        <div class="tab-pane active" id="dropdown_1">
                                                            <h4 class="block">下拉按钮</h4>
                                                            <div class="btn-group">
                                                                <a class="btn btn-circle btn-default dropdown-toggle" data-toggle="dropdown" href="javascript:;"> Tools
                                                                    <i class="fa fa-angle-down"></i>
                                                                </a>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> 设置
                                                                            <span class="badge badge-success"> 3 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> 我的信息 </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> 窗体设置 </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> 帮助
                                                                            <span class="badge badge-danger"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button class="btn btn-circle red dropdown-toggle" data-toggle="dropdown">Primary
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action
                                                                            <span class="badge badge-warning"> 2 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link
                                                                            <span class="badge badge-info"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button class="btn btn-circle purple dropdown-toggle" data-toggle="dropdown">Success
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action
                                                                            <span class="badge badge-inverse"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link
                                                                            <span class="badge"> 4 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <h4 class="block">带图标下拉按钮</h4>
                                                            <div class="btn-toolbar">
                                                                <div class="btn-group">
                                                                    <a class="btn btn-circle green" href="javascript:;" data-toggle="dropdown">
                                                                        <i class="fa fa-user"></i> User
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-pencil"></i> Edit </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-trash-o"></i> Delete </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-ban"></i> Ban </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="i"></i> Make admin </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <div class="btn-group">
                                                                    <a class="btn btn-circle purple" href="javascript:;" data-toggle="dropdown">
                                                                        <i class="fa fa-user"></i> Settings
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-plus"></i> Add </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-trash-o"></i> Edit </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-times"></i> Delete </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="i"></i> Full Settings </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="well margin-top-10">
                                                                <h4>下拉菜单设置</h4>
                                                                <div class="btn-group">
                                                                    <button class="btn btn-circle blue dropdown-toggle" data-toggle="dropdown">Info
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu bottom-up">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <div class="btn-group">
                                                                    <button class="btn btn-circle black dropdown-toggle" data-toggle="dropdown">Inverse
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu bottom-up">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <p>
                                                                    <span class="label label-success"> 备注: </span> &nbsp; 通过<code>bottom-up</code> 设置下拉菜单方向！ </p>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane" id="dropdown_2">
                                                            <h4 class="block">Hoverable式下拉按钮</h4>
                                                            <div class="btn-group">
                                                                <a class="btn btn-circle dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true" href="javascript:;"> Tools
                                                                    <i class="fa fa-angle-down"></i>
                                                                </a>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> 设置
                                                                            <span class="badge badge-success"> 3 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> 我的信息 </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> 窗体设置</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> 帮助
                                                                            <span class="badge badge-danger"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button class="btn btn-circle red dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Primary
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action
                                                                            <span class="badge badge-warning"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action
                                                                            <span class="badge badge-danger"> 2 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link
                                                                            <span class="badge badge-info"> 4 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button class="btn btn-circle purple dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Success
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action
                                                                            <span class="badge badge-inverse"> 7 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link
                                                                            <span class="badge"> 4 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-toolbar hide">
                                                                <div class="btn-group">
                                                                    <button class="btn btn-circle green dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Success
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                                <div class="btn-group">
                                                                    <button class="btn btn-circle blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Info
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                                <div class="btn-group">
                                                                    <button class="btn btn-circle black dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Inverse
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu opens-left">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                            </div>
                                                            <h4 class="block">Hoverable Dropdown Buttons with Icons</h4>
                                                            <div class="btn-toolbar">
                                                                <div class="btn-group">
                                                                    <a class="btn btn-circle green" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                        <i class="fa fa-user"></i> User
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-pencil"></i> Edit </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-trash-o"></i> Delete </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-ban"></i> Ban </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="i"></i> Make admin </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <div class="btn-group">
                                                                    <a class="btn btn-circle purple" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                        <i class="fa fa-user"></i> Settings
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-plus"></i> Add </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-trash-o"></i> Edit </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="fa fa-times"></i> Delete </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;">
                                                                                <i class="i"></i> Full Settings </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="well">
                                                                <h4 class="block">带Checkboxes下拉按钮</h4>
                                                                <div class="btn-group">
                                                                    <a class="btn btn-circle green" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> Options #1
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <div class="dropdown-menu hold-on-click dropdown-checkboxes">
                                                                        <label>
                                                                            <input type="checkbox">Option 1</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 2</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 3</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 4</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 5</label>
                                                                    </div>
                                                                </div>
                                                                <div class="btn-group">
                                                                    <a class="btn btn-circle red" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> Options #2
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </a>
                                                                    <div class="dropdown-menu hold-on-click dropdown-checkboxes">
                                                                        <label>
                                                                            <input type="checkbox">Option 1</label>
                                                                        <label>
                                                                            <input type="checkbox" checked>Option 2</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 3</label>
                                                                        <label>
                                                                            <input type="checkbox" checked>Option 4</label>
                                                                        <label>
                                                                            <input type="checkbox">Option 5</label>
                                                                    </div>
                                                                </div>
                                                                <p>
                                                                    <span class="label label-success"> 备注: </span> &nbsp;通过添加<code>hold-on-click</code> 防止下拉按钮菜单关闭 </p>
                                                            </div>
                                                            <div class="well">
                                                                <h4 class="block">Hoverable Dropup Buttons.</h4>
                                                                <div class="btn-group">
                                                                    <button class="btn btn-circle blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Info
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu bottom-up">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <!-- /btn-group -->
                                                                <div class="btn-group">
                                                                    <button class="btn btn-circle black dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Inverse
                                                                        <i class="fa fa-angle-down"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu bottom-up">
                                                                        <li>
                                                                            <a href="javascript:;"> Action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Another action </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Something else here </a>
                                                                        </li>
                                                                        <li class="divider"> </li>
                                                                        <li>
                                                                            <a href="javascript:;"> Separated link </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <p>
                                                                    <span class="label label-success"> 备注: </span> &nbsp; 通过添加<code>bottom-up</code> 控制菜单方向。 </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- END DROPDOWNS PORTLET-->
                                            <!-- BEGIN DROPDOWNS PORTLET-->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">下拉按钮</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body util-btn-group-margin-bottom-5">
                                                    <div class="clearfix">
                                                        <h4 class="block">默认bootstrap风格</h4>
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn btn-default">Default</button>
                                                            <button type="button" class="btn btn-circle-right btn-default dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn btn-primary">Primary</button>
                                                            <button type="button" class="btn btn-circle-right btn-primary dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn btn-success">Success</button>
                                                            <button type="button" class="btn btn-circle-right btn-success dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn btn-info">Info</button>
                                                            <button type="button" class="btn btn-circle-right btn-info dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn btn-warning">Warning</button>
                                                            <button type="button" class="btn btn-circle-right btn-warning dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn btn-danger">Danger</button>
                                                            <button type="button" class="btn btn-circle-right btn-danger dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">自定义风格</h4>
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn default">Default</button>
                                                            <button type="button" class="btn btn-circle-right default dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn blue">Blue</button>
                                                            <button type="button" class="btn btn-circle-right blue dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn green">Green</button>
                                                            <button type="button" class="btn btn-circle-right green dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn red">Red</button>
                                                            <button type="button" class="btn btn-circle-right red dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn yellow">Yellow</button>
                                                            <button type="button" class="btn btn-circle-right yellow dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn dark">Dark</button>
                                                            <button type="button" class="btn btn-circle-right dark dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu btn-group-circle" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn purple">Purple</button>
                                                            <button type="button" class="btn btn-circle-right purple dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /btn-group -->
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">多级下拉菜单</h4>
                                                        <!-- 大尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-circle blue dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li class="dropdown-submenu">
                                                                    <a href="javascript:;"> More options </a>
                                                                    <ul class="dropdown-menu" style="">
                                                                        <li>
                                                                            <a href="javascript:;"> Second level link </a>
                                                                        </li>
                                                                        <li class="dropdown-submenu">
                                                                            <a href="javascript:;"> More options </a>
                                                                            <ul class="dropdown-menu">
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="btn-group dropup">
                                                            <button class="btn btn-circle green dropdown-toggle" type="button" data-toggle="dropdown"> 下拉按钮
                                                                <i class="fa fa-angle-up"></i>
                                                            </button>
                                                            <ul class="dropdown-menu pull-right" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li class="dropdown-submenu">
                                                                    <a href="javascript:;"> More options </a>
                                                                    <ul class="dropdown-menu" style="">
                                                                        <li>
                                                                            <a href="javascript:;"> Second level link </a>
                                                                        </li>
                                                                        <li class="dropdown-submenu">
                                                                            <a href="javascript:;"> More options </a>
                                                                            <ul class="dropdown-menu pull-right">
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="index.html"> Third level link </a>
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                        <li>
                                                                            <a href="index.html"> Second level link </a>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">各尺寸下拉按钮</h4>
                                                        <!-- 大尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-circle btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">大尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- 小尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-circle btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 小尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- 更小尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-circle btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 更小尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="clearfix margin-bottom-10"> </div>
                                                        <!-- 大尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-circle red btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> 大尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- 小尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-circle blue btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 小尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- 更小尺寸按钮 group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-circle green btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 更小尺寸按钮
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li>
                                                                    <a href="javascript:;"> Action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Another action </a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:;"> Something else here </a>
                                                                </li>
                                                                <li class="divider"> </li>
                                                                <li>
                                                                    <a href="javascript:;"> Separated link </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">下拉按钮</h4>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group btn-group-circle dropup">
                                                                <button type="button" class="btn btn-default">Dropup</button>
                                                                <button type="button" class="btn btn-circle-right btn-default dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group btn-group-circle dropup">
                                                                <button type="button" class="btn btn-primary">右侧下拉按钮</button>
                                                                <button type="button" class="btn btn-circle-right btn-primary dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu pull-right" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                        </div>
                                                        <div class="btn-toolbar">
                                                            <div class="btn-group btn-group-circle dropup">
                                                                <button type="button" class="btn blue">Dropup</button>
                                                                <button type="button" class="btn btn-circle-right blue dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group btn-group-circle dropup">
                                                                <button type="button" class="btn green">右侧下拉按钮</button>
                                                                <button type="button" class="btn btn-circle-right green dropdown-toggle" data-toggle="dropdown">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu pull-right" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">Hoveralbe式下拉按钮</h4>
                                                        <div class="btn-toolbar margin-bottom-10">
                                                            <div class="btn-group btn-group-circle">
                                                                <button type="button" class="btn btn-default">Dropdown</button>
                                                                <button type="button" class="btn btn-circle-right btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group btn-group-circle dropup">
                                                                <button type="button" class="btn btn-primary">Dropup</button>
                                                                <button type="button" class="btn btn-circle-right btn-primary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-circle btn-success dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> Dropup
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                        </div>
                                                        <div class="btn-toolbar">
                                                            <div class="btn-group btn-group-circle">
                                                                <button type="button" class="btn blue">Dropdown</button>
                                                                <button type="button" class="btn btn-circle-right blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group btn-group-circle dropup">
                                                                <button type="button" class="btn green">Dropup</button>
                                                                <button type="button" class="btn btn-circle-right green dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                                                    <i class="fa fa-angle-up"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-circle yellow dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> Dropdown
                                                                    <i class="fa fa-angle-down"></i>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a href="javascript:;"> Action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Another action </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Something else here </a>
                                                                    </li>
                                                                    <li class="divider"> </li>
                                                                    <li>
                                                                        <a href="javascript:;"> Separated link </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <!-- /btn-group -->
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">带Checkboxes和搜索表单下拉按钮</h4>
                                                        <div class="btn-group">
                                                            <button class="btn btn-circle green dropdown-toggle" type="button" data-toggle="dropdown"> Search Dropdown
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <div class="dropdown-menu dropdown-content input-large hold-on-click" role="menu">
                                                                <form action="#">
                                                                    <div class="input-group">
                                                                        <input type="text" class="form-control" placeholder="search...">
                                                                        <span class="input-group-btn">
                                                                            <button class="btn btn-circle-right blue" type="submit">Go!</button>
                                                                        </span>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn blue">Dropdown</button>
                                                            <button type="button" class="btn btn-circle-right blue dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <div class="dropdown-menu hold-on-click dropdown-checkboxes" role="menu">
                                                                <label>
                                                                    <input type="checkbox">Option 1</label>
                                                                <label>
                                                                    <input type="checkbox" checked>Option 2</label>
                                                                <label>
                                                                    <input type="checkbox">Option 3</label>
                                                                <label>
                                                                    <input type="checkbox" checked>Option 4</label>
                                                                <label>
                                                                    <input type="checkbox">Option 5</label>
                                                            </div>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group dropup btn-group-circle">
                                                            <button type="button" class="btn green">Dropup</button>
                                                            <button type="button" class="btn btn-circle-right green dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-up"></i>
                                                            </button>
                                                            <div class="dropdown-menu hold-on-click dropdown-checkboxes" role="menu">
                                                                <label>
                                                                    <input type="checkbox">Option 1</label>
                                                                <label>
                                                                    <input type="checkbox" checked>Option 2</label>
                                                                <label>
                                                                    <input type="checkbox">Option 3</label>
                                                                <label>
                                                                    <input type="checkbox" checked>Option 4</label>
                                                                <label>
                                                                    <input type="checkbox">Option 5</label>
                                                            </div>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="clearfix margin-top-10">
                                                            <span class="label label-success"> 备注: </span> &nbsp; 通过添加<code>hold-on-click</code> 防止下拉按钮组关闭! </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <h4 class="block">带单选框按钮</h4>
                                                        <div class="btn-group btn-group-circle">
                                                            <button type="button" class="btn blue">Dropdown</button>
                                                            <button type="button" class="btn btn-circle-right blue dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-down"></i>
                                                            </button>
                                                            <div class="dropdown-menu hold-on-click dropdown-radiobuttons" role="menu">
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 1</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 2</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 3</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 4</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_1">Option 5</label>
                                                            </div>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="btn-group btn-group-circle dropup">
                                                            <button type="button" class="btn green">Dropup</button>
                                                            <button type="button" class="btn btn-circle-right green dropdown-toggle" data-toggle="dropdown">
                                                                <i class="fa fa-angle-up"></i>
                                                            </button>
                                                            <div class="dropdown-menu hold-on-click dropdown-radiobuttons" role="menu">
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 1</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 2</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 3</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 4</label>
                                                                <label>
                                                                    <input type="radio" name="radio_button_2">Option 5</label>
                                                            </div>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <div class="clearfix margin-top-10">
                                                            <span class="label label-success"> 备注: </span> &nbsp; 通过添加<code>hold-on-click</code> 防止下拉按钮组关闭!</div>
                                                    </div>
                                                </div>
                                                <!-- END DROPDOWNS PORTLET-->
                                            </div>
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="icon-settings font-green-sharp"></i>
                                                        <span class="caption-subject font-green-sharp bold uppercase">带状态按钮</span>
                                                    </div>
                                                    <div class="actions">
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-cloud-upload"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-wrench"></i>
                                                        </a>
                                                        <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body util-btn-margin-bottom-5">
                                                    <h4>Loading状态按钮</h4>
                                                    <div class="clearfix">
                                                        <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn-circle btn btn-circle btn-primary"> Loading state </button>
                                                        <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn-circle btn btn-circle btn-default"> Loading state </button>
                                                        <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn-circle btn btn-circle red"> Loading state </button>
                                                        <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn-circle btn btn-circle blue"> Loading state </button>
                                                    </div>
                                                    <h4>toggle按钮</h4>
                                                    <div class="clearfix">
                                                        <button type="button" class="btn btn-circle btn-primary" data-toggle="button"> Single toggle </button>
                                                        <button type="button" class="btn btn-circle btn-default" data-toggle="button"> Single toggle </button>
                                                        <button type="button" class="btn btn-circle red" data-toggle="button"> Single toggle </button>
                                                        <button type="button" class="btn btn-circle blue" data-toggle="button"> Single toggle </button>
                                                    </div>
                                                    <h4>Checkbox</h4>
                                                    <div class="clearfix">
                                                        <div class="btn-group btn-group-circle" data-toggle="buttons">
                                                            <label class="btn default active">
                                                                <input type="checkbox" class="toggle"> Option 1 </label>
                                                            <label class="btn default">
                                                                <input type="checkbox" class="toggle"> Option 2 </label>
                                                            <label class="btn default">
                                                                <input type="checkbox" class="toggle"> Option 3 </label>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <div class="btn-group btn-group-circle" data-toggle="buttons">
                                                            <label class="btn btn-default">
                                                                <input type="checkbox" class="toggle"> Option 1 </label>
                                                            <label class="btn btn-default active">
                                                                <input type="checkbox" class="toggle"> Option 2 </label>
                                                            <label class="btn btn-default">
                                                                <input type="checkbox" class="toggle"> Option 3 </label>
                                                        </div>
                                                    </div>
                                                    <h4>Radio</h4>
                                                    <div class="clearfix">
                                                        <div class="btn-group btn-group-circle" data-toggle="buttons">
                                                            <label class="btn blue active">
                                                                <input type="radio" class="toggle"> Option 1 </label>
                                                            <label class="btn blue">
                                                                <input type="radio" class="toggle"> Option 2 </label>
                                                            <label class="btn blue">
                                                                <input type="radio" class="toggle"> Option 3 </label>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix">
                                                        <div class="btn-group btn-group-circle" data-toggle="buttons">
                                                            <label class="btn btn-default active">
                                                                <input type="radio" class="toggle"> Option 1 </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" class="toggle"> Option 2 </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" class="toggle"> Option 3 </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--[if lt IE 9]>
    <script src="../content/superui/base/base-core/excanvas.min.js"></script>
    <script src="../content/superui/base/base-core/respond.min.js"></script>
    <![endif]-->
        <!-- 全局公共类库Begin -->
        <script src="../content/superui/min/js/superui.common.min.js"></script>
      
    </body>
<script>
    $(function () {
            $('.demo-loading-btn').click(function () {
                var btn = $(this);
                btn.button('loading');
                setTimeout(function() {
                    btn.button('reset');
                }, 3000);
            });
    });
</script>
</html>